import { useState } from 'react';
import type { ImportModalProps } from './types';
import DownloadStep from './DownloadStep';
import PreviewStep from './PreviewStep';

const ImportModal = ({ isOpen, onClose, onImport, items }: ImportModalProps) => {
  const [step, setStep] = useState(1);
  const [importData, setImportData] = useState<any>(null);

  if (!isOpen) return null;

  const handleNext = (data: any) => {
    setImportData(data);
    setStep(2);
  };

  // 重置所有状态
  const resetState = () => {
    setStep(1);
    setImportData(null);
  };

  const handleBack = () => {
    resetState();
  };

  // 包装 onClose，确保关闭时重置状态
  const handleClose = () => {
    resetState();
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
      <div className="bg-card rounded-lg shadow-lg w-full max-w-6xl my-4">
        <div className="sticky top-0 z-10 bg-card border-b px-6 py-4">
          <h2 className="text-xl font-semibold">批量导入检查项</h2>
        </div>
        
        <div className="p-6">
          {step === 1 && (
            <DownloadStep 
              onNext={handleNext}
              onClose={handleClose}
              items={items}
            />
          )}
          {step === 2 && (
            <PreviewStep
              onBack={handleBack}
              onClose={handleClose}
              onNext={onImport}
              items={items}
              importData={importData}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default ImportModal;
